<template >
  <div class="connent">
    <div style="height: 46px;">
      <van-nav-bar fixed style="height: 46px">
        <van-icon name="arrow-left" slot="left" size="28px" color="#101010" @click="onClickLeft"></van-icon>
        <span slot="title" style="font-size: 18px">会员特权</span>
      </van-nav-bar>
    </div>
    <div  class="pri-con">
      <div class="con">
        <div class="top">
          <div class="user-img">
            <img src="" alt="" >
          </div>
          <h2>专享课程每月更新</h2>
        </div>
        <div class="mid">
          <div class="m-t">
            <p><span>—</span>全以说明<span>—</span></p>
          </div>
          <div class="m-m">
            <p>每月更新至少个课程每月更新至少个课程每月更新至少个课程每月更新至少个课程每月更新</p>
          </div>
          <div class="m-l">
            <p>
              会员新课
            </p>
            <div class="vip-i">
              <img src="" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'vipPri',
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped>
  .connent{
    height: 100%;background: #EEEEEE
  }
  .pri-con{
    display: flex;justify-content: center;align-content: center;padding: 45px 36px 50px 36px;
  }
  .con{
    border: 1px solid #bbbbbb;width: 100%;
  }
  .top{
    padding: 30px 0 26px 0;text-align: center;background: #C8C8C8 ;
  }
  .user-img{
    height: 50px;width: 50px;border: 1px solid white;margin: auto;border-radius: 50%;overflow: hidden;margin-bottom: 18px;
  }
  .top h2{font-size: 18px}
  .mid{padding: 20px 24px 29px 24px;background: white}
  .m-t{
    text-align: center;margin-bottom: 13px;
  }
  .m-t span{color: #bbbbbb;margin:0 6px}
  .m-m{border: 1px solid #bbbbbb;padding: 5px;line-height: 20px;color: #888888}
  .m-l{padding: 22px 14px 18px 14px;border: 1px solid #bbbbbb;margin-top: 28px}
  .m-l p{margin-bottom: 10px}
  .vip-i{
    height: 100px;width: 100%;
  }
  </style>
